<template>
  <component :is="currentComponent" />
</template>

<script setup>
import { ref, computed, markRaw } from 'vue'

// 接收父组件传递进来的 componentInfo
const props = defineProps({
  componentInfo: {
    type: Object,
    required: true,
  },
})

// 1. 收集所有 view/inner 下的 vue 文件
const modules = import.meta.glob('@/view/inner/**/*.vue')

// 2. 计算出应该加载的路径
const componentName = props.componentInfo.file || props.componentInfo.component
const path = `/src/view/inner/${props.componentInfo.src}/${componentName}.vue`

// 3. 定义当前要渲染的组件
const currentComponent = ref(null)

// 4. 加载组件
const load = async () => {
  if (modules[path]) {
    // 找到了，加载目标组件
    const mod = await modules[path]()
    currentComponent.value = markRaw(mod.default)
  } else {
    // 找不到，加载Inner404
    const fallback = await modules['/src/view/inner/Inner404.vue']()
    currentComponent.value = markRaw(fallback.default)
    console.error(`未找到组件: ${path}，已加载 Inner404`)
  }
}

// 5. 马上执行一次
load()

// 6. 提供 parentInfo 给子组件
import { provide } from 'vue'
provide('parentInfo', props.componentInfo.params || null)
</script>
